<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.html">
<link rel="import" href="chrome://resources/mojo/services/network/public/mojom/ip_address.mojom.html">
<link rel="import" href="chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom.html">
<link rel="import" href="chrome://resources/mojo/mojo/public/mojom/base/time.mojom.html">
<link rel="import" href="chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="mojo_interface_provider.html">
<link rel="import" href="network_shared_css.html">

<dom-module id="network-choose-mobile">
  <template>
    <style include="cr-shared-style network-shared md-select iron-flex">
      /* Leave some space between button and select. */
      select {
        margin-inline-start: 8px;
      }
    </style>
    <div class="property-box first two-line">
      <div class="flex layout vertical">
        <div>[[i18n('networkChooseMobile')]]</div>
        <div class="cr-secondary-text">
          [[getSecondaryText_(managedProperties, deviceState)]]
        </div>
      </div>
      <cr-button on-click="onScanTap_"
          disabled="[[!getEnableScanButton_(managedProperties,
              deviceState, disabled)]]">
        [[i18n('networkCellularScan')]]
      </cr-button>
      <select class="md-select" on-change="onChange_"
          value="[[selectedMobileNetworkId_]]"
          disabled="[[!getEnableSelectNetwork_(managedProperties,
              deviceState, disabled)]]"
          aria-label="[[i18n('networkChooseMobile')]]">
        <template is="dom-repeat" items="[[mobileNetworkList_]]">
          <option value="[[item.networkId]]"
              disabled="[[getMobileNetworkIsDisabled_(item)]]">
            [[getName_(item)]]
          </option>
        </template>
      </select>
    </div>
  </template>
  <script src="network_choose_mobile.js"></script>
</dom-module>
